import React, { useState, useEffect } from 'react';
import styles from './app.module.css';
import VmListModel from './components/VmListModel';
import SpiceClientModal from './components/SpiceClientModal';
import VncClientModel from './components/VncClientModel';
import CreateVMModal from './components/CreateVMModal'; // 导入 CreateVMModal 组件
import { FaPowerOff, FaPlug, FaStop, FaPlay, FaExpand, FaPlus, FaCog } from 'react-icons/fa';
import { FaHome } from 'react-icons/fa'; // 确保 FaHome 组件被正确导入


export default function App() {
  const [ep, setEP] = useState('');
  const [contentType, setCount] = useState('');
  const [buttonOpacity, setButtonOpacity] = useState(1);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [currentStep, setCurrentStep] = useState(0);
  const [domainModel, setDomainModel] = useState<boolean>(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setButtonOpacity(0.5);
    }, 5000);
    return () => clearTimeout(timer);
  }, []);

  const handleClick = (type: string, ep: string) => {
    setEP(ep);
    setCount(type);
  };

  const handleCreateVM = () => {
    setIsModalVisible(true);
  };

  const handleModalOk = () => {
    // 这里处理XML配置提交逻辑
    setIsModalVisible(false);
  };

  const handleModalCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <div className={styles.container}>
      <div style={{
        display: 'flex',
        width: '100%',
        height: '100vh',
        boxSizing: 'border-box',
        overflow: 'hidden',
      }}>
        
        {/* 虚拟机列表 */}
        <VmListModel className={styles.leftBar} operation={handleClick} children={
          <>
            <button className={styles.newVmButton} onClick={handleCreateVM}>
              <FaPlus style={{ marginRight: '8px' }} /> 新建主机
            </button>

            <button className={styles.newVmButton} onClick={() => { setDomainModel(true);}}>
              <FaCog style={{ marginRight: '8px' }} /> 系统配置
            </button>
          </>
        } />

        {/* 虚拟机详情 */}
        <div
          id="content"
          style={{
            flex: 1,
            overflow: 'auto',
            borderLeft: '1px solid #ddd',
            boxSizing: 'border-box',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: 'column',
            gap: '20px',
            position: 'relative',
            backgroundColor: '#f5f5f5'


          }}
        >
          {
            contentType !== '' &&
            <>
              <button
                style={{
                  position: 'absolute',


                  top: '10px',
                  left: '10px',
                  padding: '8px',
                  backgroundColor: 'transparent',
                  border: 'none',
                  cursor: 'pointer',
                  opacity: buttonOpacity,
                  transition: 'opacity 0.3s ease'
                }}
                onClick={() => { document.exitFullscreen(); setCount(''); }}
              >

                <FaHome style={{ fontSize: '20px', color: '#666' }} />
              </button>
              {/* 修改全屏按钮位置 */}
              <button
                style={{
                  position: 'absolute',
                  bottom: '10px',
                  right: '10px',
                  padding: '8px',
                  backgroundColor: 'transparent',
                  border: 'none',
                  cursor: 'pointer',
                  opacity: buttonOpacity,
                  transition: 'opacity 0.3s ease'
                }}
                onClick={() => {
                  const content = document.getElementById('content');
                  if (content) {
                    if (document.fullscreenElement) {
                      document.exitFullscreen();
                    } else {
                      content.requestFullscreen();
                    }
                  }
                }}
              >

                <FaExpand style={{ fontSize: '20px', color: '#666' }} />
              </button>
            </>
          }

          {
            contentType === 'spice' ?
              <SpiceClientModal
                url={"ws://192.168.0.100:8009/websockify/?token=" + ep}
                style={{
                  width: '100%', height: '100%',
                  display: 'flex',
                  flexWrap: 'wrap',
                  alignContent: 'center',
                  justifyContent: 'center'
                }}
              />
              :
              contentType === 'vnc' ?
                <VncClientModel
                  url={'ws://192.168.0.100:8009/websockify/?token=' + ep}
                  style={{ width: '100%', height: '100vh', zIndex: 11 }}
                />
                :
                <>

                  {/* 使用 CreateVMModal 组件 */}
                  <CreateVMModal
                    isModalVisible={isModalVisible}
                    handleModalOk={handleModalOk}
                    handleModalCancel={handleModalCancel}
                    currentStep={currentStep}
                    setCurrentStep={setCurrentStep}
                  />

                  <div style={{
                    textAlign: 'center',
                    border: '1px solid #ddd',
                    borderRadius: '8px',
                    padding: '20px',
                    maxWidth: '900px',
                    margin: '0 auto',
                    backgroundColor: '#fff',
                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
                  }}>
                    <div style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '20px' }}>
                      虚拟机操作指南
                    </div>
                    <div style={{ display: 'flex', gap: '30px' }}>
                      <div style={{
                        textAlign: 'center',
                        display: 'flex',
                        flexDirection: 'column',

                        alignItems: 'center'
                      }}>

                        <FaPlay style={{ fontSize: '32px', marginBottom: '10px', color: '#90EE90' }} />
                        <div>启动中/点击可选中关闭暂停</div>
                      </div>
                      <div style={{
                        textAlign: 'center',
                        display: 'flex',
                        flexDirection: 'column',

                        alignItems: 'center'
                      }}>

                        <FaPowerOff style={{ fontSize: '32px', marginBottom: '10px' }} />
                        <div>虚拟机已经关机，点击开机</div>
                      </div>
                      <div style={{
                        textAlign: 'center',
                        display: 'flex',
                        flexDirection: 'column',

                        alignItems: 'center'
                      }}>

                        <FaPlug style={{ fontSize: '32px', marginBottom: '10px' }} />
                        <div>点击选中连接虚拟机的方式</div>
                      </div>
                      <div style={{
                        textAlign: 'center',
                        display: 'flex',
                        flexDirection: 'column',

                        alignItems: 'center'
                      }}>

                        <FaStop style={{ fontSize: '32px', marginBottom: '10px' }} />
                        <div>虚拟机已经暂停/点击启动</div>
                      </div>
                    </div>
                  </div>
                </>
          }
        </div>

        <div className={styles.main}>
        </div>
      </div>
    </div>
  )
}
